<template>
	<view>
		<view class="example-body">
			<uni-steps tap="test" :options="list1" active-color="#007AFF" :active="active" />
		</view>

		<view class="cur-status">
			<view class="block base">
				<view class="block-title">商品信息</view>
				<view class="block-content">
					<view class="info">
						<image mode="aspectFit" :src="detail.url"></image>

						<view class="base">
							<view class="title">
								<view>名称：{{ detail.productName }}</view>
							</view>
							<view class="color">
								<view>商品单价：{{ detail.orderAmounts }}</view>
							</view>
						</view>
					</view>

					<!-- <view class="content">
					<view class="content-title">{{detail.title}}</view>
					
					<view class="content-attr"><view>材质：</view>{{detail.val1}}</view>
					<view class="content-attr"><view>规格：</view>{{detail.val2}}</view>
					<view class="content-attr"><view>风格：</view>{{detail.val3}}</view>
					<view class="content-attr"><view>品牌：</view>{{detail.val4}}</view>
					<view class="content-attr"><view>颜色：</view>{{detail.val5}}</view>
					
				</view> -->
				</view>
			</view>

			<view class="block">
				<view class="block-title">客户信息</view>
				<view class="block-content">
					<view class="content-attr">
						<view>预约安装日期：</view>
						{{ detail.appointInstallTime }}
					</view>
					<view class="content-attr">
						<view>收货地址：</view>
						{{ detail.receiverPhone }}
					</view>
					<view class="content-attr">
						<view>详细地址：</view>
						{{ detail.receiverPhone }}
					</view>
				</view>
			</view>

			<view class="block">
				<view class="block-title">复尺信息</view>
				<view class="block-content">

					<view class="content-attr">

						{{ detail.remarks }}
					</view>

					<!-- <view v-for="item in detail.measureList" :key="index" class="content-attr">
							<view>{{ item.name }}：</view>
							{{ item[item.paramName] }}m
						</view>

						<view class="content-attr">
							<view>计费面积：</view>
							{{ detail.area }}㎡
						</view>
						<view>(计费面积 = （ 长度 X 高度 ）)</view>
						<view class="content-attr">
							<view>材料费用：</view>
							¥{{ detail.orderAmount }}
						</view>
						<view class="content-attr">
							<view>人工费用：</view>
							¥{{ detail.InstallAmount }}
						</view>
						<view class="content-attr">
							<view>总价：</view>
							¥{{ detail.totalAmount }}
						</view> -->


					<!-- <view class="uni-form-item uni-column">
					
						<input class="uni-input" name="width" placeholder="请输入长度" />
					</view>
					<view class="uni-form-item uni-column">
						
						<input class="uni-input" name="height" placeholder="请输入高度" />
					</view>
					
					<view class="uni-form-item uni-column">
						<view class="title">*实际尺寸与业主测量差额¥100.00元，需客户进行补差价！</view>
						<radio-group name="difference">
							<label>
								<radio value="1" /><text>客户确定补差价</text>
							</label>
							<label>
								<radio value="2" /><text>误差较小，无需客户补差价</text>
							</label>
						</radio-group>
					</view>
					
					
					
					<drawing></drawing> -->
				</view>
			</view>
			<view class="block upload">

				<view class="block-title">
					<view v-for="item in upload_img_list" :key="item.id" class="order-list">
						<image mode="aspectFit" :src="item.src"></image>
					</view>


				</view>
				<view class="block-title">上传图片进度</view>
				<view class="block-content"><progress :percent="percent" stroke-width="10"></progress></view>
				<view><button type="primary" :loading="loading" :disabled="disabled" @click="upload">选择照片</button></view>
			</view>
			<!-- <view class="order-btn" @tap="done">
				复尺完成
			</view> -->
		</view>

		<view class="uni-btn-v"><button @click="install_done">安装完成</button></view>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue';
	import uniSection from '@/components/uni-section/uni-section.vue';
	import config from '@/common/config.js';
	var graceChecker = require('../../common/graceChecker.js');
	export default {
		components: {
			uniSection,
			uniSteps,
		},
		data() {
			return {
				active: 3,
				list1: [{
						title: '待支付',
						desc: '2018-11-11'
					},
					{
						title: '待测量',
						desc: '2018-11-13'
					},
					{
						title: '待收货',
						desc: '2018-11-14'
					},
					{
						title: '待安装',
						desc: '2018-11-15'
					},
					{
						title: '已完成',
						desc: '2018-11-18'
					}
				],
				list2: [{
						title: '待支付',
						desc: '2018-11-11'
					},
					{
						title: '待发货',
						desc: '2018-11-14'
					},
					{
						title: '待收货',
						desc: '2018-11-15'
					},
					{
						title: '已完成',
						desc: '2018-11-18'
					}
				],
				detail: {
					src: 'http://www.gdredoak.com/upload/201810/16/201810161616381484.jpg',
					title: '落地窗',
					val1: '断桥铝',
					val2: '断桥铝',
					val3: '欧式',
					val4: '凤铝',
					val5: '白色',

					val6: '2020-06-30',
					val7: '江苏省  苏州市  吴江区',
					val8: '千邑悦庭11栋305',

					val9: '长度',
					val0: '高度',
					val1: '计费面积',
					val2: '预计人工费'
				},
				measureType: 1,
				cal_area: '',

				worker_cost: '',

				cal_areaA: '',
				cal_areaB: '',
				material_cost: '',
				worker_costA: '',
				worker_costB: '',
				total_price: '',

				orderSubId: '',
				orderItemId: '',
				measureAttributes: '',

				percent: 0,
				loading: false,
				disabled: false,
				upload_img_list: [],
				img_data_list: []

			};
		},
		onLoad(options) {
			debugger;
			this.get_detail(options.id);
		},
		methods: {
			upload() {
				var _self = this;
				uni.chooseImage({
					count: 1,
					//sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						debugger;
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: config.uploadImgUrl,
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								//'Content-Type': 'application/json', //自定义请s求头信息
								token: uni.getStorageSync('userdata').accesstoken
							},
							success: function(res, file) {

								let data = JSON.parse(res.data);
								_self.upload_img_list.push({
									src: data.data.filePath
								})
								_self.img_data_list.push(data.data.filePath);

								console.log(uploadFileRes.data);
							}
						});

						uploadTask.onProgressUpdate(function(res) {
							_self.percent = res.progress;
							console.log('上传进度' + res.progress);
							console.log('已经上传的数据长度' + res.totalBytesSent);
							console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
						});
					},
					error: function(e) {
						console.log(e);
					}
				});
			},

			init() {
				var that = this;
				this.get_detail(options.id);
			},
			changInput: function(e) {
				debugger;
			},

			get_detail(id) {
				this.orderSubId = id;
				this.orderItemId = id;
				debugger;
				var that = this;
				uni.request({
					url: config.installDetailUrl + id, //仅为示例，并非真实接口地址。
					method: 'GET',

					header: {
						//'Content-Type': 'application/json', //自定义请s求头信息
						token: uni.getStorageSync('userdata').accesstoken
					},
					success: res => {
						debugger;

						if (res.data.data) {
							that.detail = res.data.data;
						}
					}
				});
			},
			install_done() {

				debugger;
				var that = this;

				uni.request({
					url: config.installUpdatelUrl, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						"orderSubId": Number(this.orderSubId),
						"picList": this.img_data_list
					},
					header: {
						'Content-Type': 'application/json', //自定义请s求头信息
						token: uni.getStorageSync('userdata').accesstoken,

					},
					success: res => {
						debugger;

						if (res.data.status == "1") {
							uni.navigateTo({
								url: 'installDone' + '?id=' + this.orderSubId
							});
						}
					}
				});
			},
			change() {
				if (this.active < this.list1.length - 1) {
					this.active += 1;
				} else {
					this.active = 0;
				}
			},
			test(e) {
				debugger;
			},
			formSubmit: function(e) {
				var that = this;
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
				//定义表单规则

				var rule = '';

				if (detail.measureType == 1) {
					rule = [{
							name: 'width',
							checkType: 'notnull',
							checkRule: '',
							errorMsg: '请填写宽度'
						},
						{
							name: 'height',
							checkType: 'notnull',
							checkRule: '',
							errorMsg: '请填写高度'
						}
						//{name:"difference", checkType : "in", checkRule:"客户确定补差价,误差较小，无需客户补差价",  errorMsg:"请选择性别"},
					];
				}

				if (detail.measureType == 2) {
					rule = [{
							name: 'widthA',
							checkType: 'notnull',
							checkRule: '',
							errorMsg: '请填写宽度A'
						},
						{
							name: 'heightB',
							checkType: 'notnull',
							checkRule: '',
							errorMsg: '请填写高度A'
						},
						{
							name: 'widthB',
							checkType: 'notnull',
							checkRule: '',
							errorMsg: '请填写宽度B'
						},
						{
							name: 'heightB',
							checkType: 'notnull',
							checkRule: '',
							errorMsg: '请填写高度B'
						}
						//{name:"difference", checkType : "in", checkRule:"客户确定补差价,误差较小，无需客户补差价",  errorMsg:"请选择性别"},
					];
				}

				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.showModal({
						title: '提示',
						content: '确定复尺完成吗？',
						showCancel: false,
						confirmText: '确定',
						success: function(res) {
							uni.request({
								url: config.updateProductUrl, //仅为示例，并非真实接口地址。
								method: 'POST',
								data: {
									orderSubId: that.orderSubId,
									orderItemId: that.orderItemId,
									measureAttributes: that.measureAttributes
								},
								header: {
									//'Content-Type': 'application/json', //自定义请s求头信息
									token: uni.getStorageSync('userdata').accesstoken
								},
								success: res => {
									uni.navigateTo({
										url: 'install'
									});
								}
							});
						}
					});
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: 'none'
					});
				}
			},
			formReset: function(e) {
				console.log('清空数据');
			},
			done: function(e) {}
		}
	};
</script>

<style>
	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #ffffff;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007aff;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	uni-view {
		font-size: 12px;
	}

	image {
		width: 200rpx;
		height: 200rpx;
		margin: 0 30rpx;
	}

	.block {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.block-title {
		font-weight: bolder;
		margin-bottom: 20rpx;
	}

	.block-content {
		display: flex;
		flex-direction: column;
	}

	.base .block-content {
		display: flex;
		flex-direction: row;
	}

	.content {}

	.content-title {}

	.content-attr {
		color: #9f9e9e;
		float: left;
		width: 80%;
	}

	.content-attr view {
		float: left;
		width: 40%;
		text-align: right;
	}

	.base .content-attr {
		width: 45%;
	}

	.base .content-attr view {
		width: auto;
	}

	.order-btn {
		width: 100%;
		height: 90rpx;
		position: fixed;
		bottom: 0px;
		text-align: center;
		background-color: #ff5722;
		color: #fff;
		line-height: 90rpx;
		font-size: 1rem;
	}

	progress {
		margin-bottom: 1rem;
	}

	.upload image {
		width: 100%;
	}
</style>
